<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书城注册</title>
</head>
<!-- 网页图标 -->
<!--<link rel="shortcut icon" href="./favicon.ico" tyoe="image/x-icon">-->
<!-- 导入初始化css -->
<!--<link rel="stylesheet" type="text/css" href="css/base.css">-->

<style>
    body {
        background-color: #F7F7F7;
    }

    .title {
        position:fixed;
        top:40px;
        width: 200px;
        height: 200px;

    }

    .title p {
        font-size: 60px;
        color: #E64145;
        font-family: "宋体";
    }



    .together {
        width: 800px;
        margin: 50px auto;
        background-color: #FFF;
        /*border: 1px solid #ccc;*/
        border-radius: 5px;
    }

    .together .choose {
        width: 100%;
        /*height: 300px;*/
        margin: 10px auto;
        text-align: center;
        height: 50px;

    }

    .together .choose a {
        display: inline-block;
        height: 46px;
        line-height: 46px;
        font-size: 23px;
        font-weight: 700;
        text-decoration: none;
        /*border-bottom: 2px solid #E64145;*/
    }

    .together .choose a:hover {
        color: #E64145;

    }

    .choose span {
        text-align: center;
        margin: 0 30px;
    }

    ul {
        margin: 0;
        padding:50px;
        padding-top: 0;
    }

    li {
        display: flex;
        margin: 20px 0;
    }

    input,label{
        display: block;
        float: left;
        height: 46px;
        font-size: 23px;
        box-sizing: border-box;
        color: #333;
    }

    label {
        width: 200px;
        line-height: 46px;
        margin-right: 30px;
        text-align: right;
        font-weight: 700;
    }

    input {
        width: 320px;
        padding: 8px;
        /*border: 1px solid #cccccc;*/
        outline: none;
        /*text-align: center;*/

    }

    input.code {
        width: 120px;
    }

    input.verify {
        width: 190px;
        margin-left: 10px;
        background-color: red;
        color:#fff;
        text-align: center;

    }

    /*input.submit {
        background-color: red;
        color: #fff;
    }*/
    input[type=button] {
        border: none;
        color: #fff;
        background-color: #E64145;
        border: 4px;
        cursor: pointer;

    }

    .tips {
        /*固定定位*/
        position: fixed;
        top:0;
        width: 100%;
        height: 40px;
        text-align: center;
        display: none;

    }

    .tips p {
        min-width: 300px;
        max-width: 400px;
        margin: 0 auto;
        line-height: 40px;
        color: #fff;
        background-color: #C91623;

    }

</style>
<body ng-app-="NetworkRequest" ng-controller="NetworkRequestCtro">
<div class="title">
    <p></p>
</div>
<div class="together">
    <div class="choose"><a href="#" class="login_a">人事管理</a><span>●</span><a href="#" class="register_a">薪酬管理</a></div>

    <!-- 人事登录 -->
    <div class="login">
        <form action="">
            <ul>
                <li>
                    <label for="name">用户名</label>
                    <input type="text" id="name" class="name" value="伟鸿">
                </li>
                <li>
                    <label for="psw">密码</label>
                   <input type="password" id="psw" class="psw" value="123456">
                </li>

                <li>
                    <label for=""></label>
                    <input type="button" class="personBtn" value="登录">
                </li>

            </ul>
        </form>
    </div>

    <!-- 薪酬管理登录 -->
    <div class="register">
        <form action="">
            <ul>
                <li>
                    <label for="name2">用户名</label>
                    <input type="text" class="name2" value="小二">
                </li>
                <li>
                    <label for="psw2">密码</label>
                    <input type="password" class="psw2" value='123456'>
                </li>
                <li>
                    <label for=""></label>
                    <input type="button" class="salaryBtn" value="登录">
                </li>
            </ul>
        </form>
    </div>


</div>
<!-- 提示信息 -->
<div class="tips">
    <p>输入有误</p>
</div>

</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/network.js"></script>

<script>

    $(function(){
        // 页面初始设置 显示login,隐藏register
        $('.register').css('display','none');
        $('.login_a').css({
            color:'#E64145',
            borderBottom:'2px solid #E64145',
        });
        // 逻辑一
        // 当点击登录按钮，登录字体、下划线为红色，login display为inline-block register为none
        $('.login_a').on('click',function(){
            // 设置login
            $('.login').css('display','inline-block');

            $('.login_a').css({
                display: 'inline-block',
                borderBottom:"2px solid #E64145",
                color: '#E64145',

            });

            //设置register
            $('.register').css({
                display:'none',

            })
            $('.register_a').css({
                borderBottom:'none',
                color: '#666',
            })
        })
        $('.personBtn').on('click',function(){
            // 1.判断是否为空
            if(  $('.psw').val() == '' || $('.name').val() == ''){
                if($('.name').val() == ""){
                    $('.tips p').html('用户名不能为空！');
                    $('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
                    return;
                }
                else if($('.psw').val() == ""){
                    $('.tips p').html('密码不能为空!');
                    $('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
                    return ;
                }
                return;
            }

            //满足要求 发送ajax请求
            $.ajax({
                'url':url.personLogin,
//                'url':"/api/v1/admin/login",
                'type':"POST",
                // 把json数据转换为json对象
                'dataType':"json",
                'data':{
                    //用户名
                    "username":$('.name').val(),
                    //密码
                    "password":$('.psw').val(),
                },
                'success':function(data){
                    // console.log(`message=${data.message}`,`code=${data.code}`);

                    // 登录成功
                    if(data.message == "success" && data.status == 200){
                        var user_token = data.data.user_token;
                        console.log(user_token)
                        document.cookie="user_token="+user_token;
                        $('.tips p').html('登录成功，请稍后...');
                        $('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
                        setTimeout(function(){
                            window.location.href = "./personIndex";
                        },3000)

                    }else{
                        // 登录失败
                        $('.tips p').html(`登录失败!`);
                        $('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
                    }
                }

            })
        })




        //逻辑二
        //当点击注册按钮，注册字体、下划线为红色，register display为inline-block login为none
        $('.register_a').on('click',function(){
            //设置logiin
            $('.login').css('display','none');

            $('.login_a').css({
                borderBottom:'none',
                color:'#666',
            })
            //设置register
            $('.register').css({
                display:'inline-block',

            })

            $('.register_a').css({
                color:'#E64145',
                borderBottom:'2px solid #E64145',
            })
        });




        // 校验逻辑
        //薪酬管理登錄

        $('.salaryBtn').on('click',function(){
            // 1.判断是否为空
            // 1.判断是否为空
            if(  $('.psw2').val() == '' || $('.name2').val() == ''){
                if($('.name2').val() == ""){
                    $('.tips p').html('用户名不能为空！');
                    $('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
                    return;
                }
                else if($('.psw2').val() == ""){
                    $('.tips p').html('密码不能为空!');
                    $('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
                    return ;
                }
                return;
            }
            //满足要求 发送ajax请求
            $.ajax({
                'url': url.salaryLogin,
                'type':"POST",
                // 把json数据转换为json对象
                'dataType':"json",
                'data':{
                    //用户名
                    "username":$('.name2').val(),
                    //密码
                    "password":$('.psw2').val(),
                },
                'success':function(data){
                    // console.log(`message=${data.message}`,`code=${data.code}`);

                    // 登录成功
                    if(data.message == "success" && data.status == 200){
                        var user_token = data.data.user_token;
                        console.log(user_token)
                        document.cookie="user_token="+user_token;
                        $('.tips p').html('登录成功，请稍后...');
                        $('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
                        setTimeout(function(){
                            window.location.href = "./salaryIndex";
                        },1000)

                    }else{
                        // 登录失败
                        $('.tips p').html(`登录失败!`);
                        $('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
                    }
                }

            })
        })

      // 2.1校验用户名
        function isUser(str){
            reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
            // console.log(reg.test(str))
            if( !reg.test(str)){
                return false;
            }
            return true;
        }
        // isUser('a123456'	)
        //2.2校验密码 以字母开头，长度在6~18之间，只能包含字母、数字和下划线
        function isPsw(str){
            reg = /^[a-zA-Z]\w{5,17}$/;
            // console.log(reg.test(str))
            if(!reg.test(str)){
                return false;
            }
            return true;
        }

    })



</script>
</html>